<template>
  <a-layout :class="['layout', device]">
    <!-- layout header -->
    <global-header
      :mode="layoutMode"
      :menus="menus"
      :theme="navTheme"
      :collapsed="collapsed"
      :device="device"
      @toggle="toggle"
    />
    <a-layout
      :class="[layoutMode, `content-width-${contentWidth}`]"
      :style="{ paddingLeft: contentPaddingLeft, minHeight: 'calc(100vh - 64px)' }"
    >
      <!-- SideMenu -->
      <a-layout-sider
        :class="['sider']"
        width="300px"
        collapsedWidth="0"
        :collapsible="true"
        v-model="collapsed"
        :trigger="null"
      >
        <transition name="page-transition">
          <route-view />
        </transition>
      </a-layout-sider>

      <!-- layout content -->
      <a-layout-content
        :style="{ height: '100%', margin: '0', position: 'relative', paddingTop: fixedHeader ? '64px' : '0' }"
      >
        <multi-tab v-if="multiTab"></multi-tab>
        <div class="arcgis-wrapper relative">
          <base-map :loaded.sync="loaded">
            <template #setting="{ map, basemapGallery }" v-if="loaded">
              <!-- eslint-disable -->
              <setting-drawer :map="map" :basemapGallery="basemapGallery"></setting-drawer>
            </template>
            <template #drawing="{ map, editToolbar }" v-if="loaded">
              <!-- eslint-disable -->
              <edit-tool :map="map" :editToolbar="editToolbar"></edit-tool>
            </template>
          </base-map>
        </div>
        <!-- Setting Drawer (show in development mode) -->
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import { triggerWindowResizeEvent } from '@/utils/util'
import { mapState, mapActions } from 'vuex'
import { mixin, mixinDevice } from '@/utils/mixin'
import config from '@/config/defaultSettings'

import RouteView from './RouteView'
import SideMenu from '@views/components/SideMenu'
import GlobalHeader from '@/components/GlobalHeader'
import GlobalFooter from '@/components/GlobalFooter'
import SettingDrawer from '@views/components/SettingDrawer.vue'
import EditTool from '@views/components/EditTool.vue'
import { convertRoutes } from '@/utils/routeConvert'
import BaseMap from '@views/components/arcgis/BaseMap.vue'
export default {
  name: 'BasicLayout',
  mixins: [mixin, mixinDevice],
  components: {
    RouteView,
    SideMenu,
    GlobalHeader,
    GlobalFooter,
    BaseMap,
    EditTool,
    SettingDrawer
  },
  data() {
    return {
      loaded: false,
      production: config.production,
      collapsed: false,
      menus: []
    }
  },
  computed: {
    ...mapState({
      // 动态主路由
      mainMenu: (state) => state.permission.addRouters
    }),
    contentPaddingLeft() {
      if (!this.fixSidebar || this.isMobile()) {
        return '0'
      }
      if (this.sidebarOpened) {
        return '300px'
      }
      return '80px'
    }
  },
  watch: {
    sidebarOpened(val) {
      this.collapsed = !val
    }
  },
  created() {
    const routes = convertRoutes(this.mainMenu.find((item) => item.path === '/'))
    this.menus = (routes && routes.children) || []
    this.collapsed = !this.sidebarOpened
  },
  mounted() {
    const userAgent = navigator.userAgent
    if (userAgent.indexOf('Edge') > -1) {
      this.$nextTick(() => {
        this.collapsed = !this.collapsed
        setTimeout(() => {
          this.collapsed = !this.collapsed
        }, 16)
      })
    }
  },
  methods: {
    ...mapActions(['setSidebar']),
    toggle() {
      this.collapsed = !this.collapsed
      this.setSidebar(!this.collapsed)
      triggerWindowResizeEvent()
    },
    paddingCalc() {
      let left = ''
      if (this.sidebarOpened) {
        left = this.isDesktop() ? '300px' : '80px'
      } else {
        left = (this.isMobile() && '0') || (this.fixSidebar && '80px') || '0'
      }
      return left
    },
    menuSelect() {},
    drawerClose() {
      this.collapsed = false
    }
  }
}
</script>

<style lang="less">
.layout.ant-layout {
  height: 100% !important;
  overflow-y: hidden;
}
.ant-layout-sider {
  background: #fff !important;
}
/*
 * The following styles are auto-applied to elements with
 * transition="page-transition" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the page transition by editing
 * these styles.
 */

.page-transition-enter {
  opacity: 0;
}

.page-transition-leave-active {
  opacity: 0;
}

.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.arcgis-wrapper {
  width: 100%;
  height: 100%;
}
</style>
